import React, {Component} from 'react';
import {Button} from 'antd';
// import store from '../../store/index';

import {connect} from 'react-redux';
import {DECREMENT, INCREMENT} from "../../store/actions";

//成员变量    不会随着数据改变而改变页面
//state变量  this.setState({})
class ReduxPage extends Component {
  state = {
    count: 0
  };

  componentDidMount() {
    // store.subscribe(() => {
    //   this.setState({
    //     count: store.getState()
    //   })
    // });
  }

  render() {
    let {
      count, person, countIncrement,
      countDecrement
    } = this.props;
    return (
      <div>
        <Button onClick={() => {
          // store.dispatch({type: 'DECREMENT'})
          countDecrement(2);
        }}>-</Button>
        {count}
        <Button onClick={() => {
          // store.dispatch({type: 'INCREMENT'})
          countIncrement(3);
        }}>+</Button>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    count: state.counter,
    person: state.personReducer
  }
};

const mapDispatchToProps = dispatch => {
  return {
    countIncrement(num) {
      dispatch({type: INCREMENT, num});
    },
    countDecrement(num) {
      dispatch({type: DECREMENT, num});
    }
  }
};

//注意 如果 不需要提交数据到仓库 就可以不写第二个回调
export default connect(mapStateToProps, mapDispatchToProps)(ReduxPage);
